<template>
  <div class="sh-iscroll">
    <div class="sh-iscroll-wrapper" @tap.stop="bindTap" :style="'width:'+(wrapper_width?wrapper_width:'auto')">
      <slot></slot>
    </div>
  </div>
</template>
<style>
  .sh-iscroll {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

</style>
<script>
  import iScroll from "iscroll/build/iscroll-probe";

  export default {
    name: 'sh-iscroll',
    props: {
      options: Object,
      wrapper_width: String,
    },
    data() {
      return {
        iscroll: null,
        hadTop: false,
        hadBottom: false,
      }
    },
    beforeDestroy() {
      this.iscroll && this.iscroll.destroy();
      this.iscroll = null;
    },
    mounted() {
      this.init();
    },
    methods: {
      init(options) {
        if (!iScroll) {
          alert("iScroll模块初始化失败");
          return;
        }
        const events = [
          'beforeScrollStart',
          'scrollCancel',
          'scrollStart',
//        'scrollEnd',
//        'scroll',
          'flick',
          'zoomStart',
          'zoomEnd'
        ]

        this.$nextTick(() => {
          this.iscroll = new iScroll(this.$el, options || this.options);
          events.forEach(event => {
            this.iscroll.on(event, () => this.$emit(event, this.iscroll))
          })

          let event_name = "scroll";
          if (this.options && this.options.probeType > 1) {
            event_name = "scroll";
          } else {
            event_name = "scrollEnd"
          }

          const {iscroll} = this;
          iscroll.on(event_name, e => {
            this.$emit(event_name, this.iscroll);
            if (iscroll.y >= 0) {
              if (!this.hadTop) {
                this.hadTop = true;
                this.$emit("pullDown", this.iscroll);
              }
            } else if (iscroll.y < iscroll.maxScrollY) {
              if (!this.hadBottom) {
                this.hadBottom = true;
                this.$emit("pullUp", this.iscroll);
              }
            } else {
              this.hadTop = false;
              this.hadBottom = false;
            }
          });
        });
      },
      destroy() {
        this.$nextTick(() => this.iscroll.destroy.apply(this.iscroll, arguments))
      },
      zoom() {
        this.$nextTick(() => this.iscroll.zoom.apply(this.iscroll, arguments))
      },
      goToPage() {
        this.$nextTick(() => this.iscroll.goToPage.apply(this.iscroll, arguments))
      },
      next() {
        this.$nextTick(() => this.iscroll.next.apply(this.iscroll, arguments))
      },
      prev() {
        this.$nextTick(() => this.iscroll.prev.apply(this.iscroll, arguments))
      },
      scrollToElement() {
        this.$nextTick(() => this.iscroll.scrollToElement.apply(this.iscroll, arguments))
      },
      scrollBy() {
        this.$nextTick(() => this.iscroll.scrollBy.apply(this.iscroll, arguments))
      },
      scrollTo() {
        this.$nextTick(() => this.iscroll.scrollTo.apply(this.iscroll, arguments))
      },
      refresh() {
        this.$nextTick(() => this.iscroll.refresh.apply(this.iscroll, arguments))
      },
      enable() {
        this.$nextTick(() => this.iscroll.enable.apply(this.iscroll, arguments))
      },
      disable() {
        this.$nextTick(() => this.iscroll.disable.apply(this.iscroll, arguments))
      },
      pause() {
        //TODO 暂停
      },
      bindTap(e) {
        this.$emit("tap", e);
      }
    },
    watch: {},
    computed: {}
  };
</script>
